<template>
    <div class="form-parent">
        <a-form layout="formState.layout" ref="formRef" :model="formState" :rules="rules" @finish="handleFinish"
            @finishFailed="handleFinishFailed" class="fromLeft">
            <a-form-item>
                <a-input v-model:value="formState.userName" placeholder="Username">
                    <template #prefix>
                        <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item name="password">
                <a-input v-model:value="formState.password" type="password" placeholder="Password">
                    <template #prefix>
                        <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit"
                    :disabled="formState.userName === '' || formState.password === ''">
                    Log in
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script lang="ts" setup>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { ValidateErrorEntity, type RuleObject } from 'ant-design-vue/es/form/interface';
import { defineComponent, reactive, UnwrapRef } from 'vue';
import { useRouter } from 'vue-router';
import axios from "axios";
interface FormState {
    userName: string;
    password: string;
}


const formState: UnwrapRef<FormState> = reactive({
    userName: '',
    password: '',
});
let validatePass = async (rule: RuleObject, value: String) => {
    if (value === '') {
        return Promise.reject('please input the password');
    } else if (value.length < 2) {
        return Promise.reject('长度不能小于两位')
    } else {
        return Promise.resolve();
    }
};
const rules = {
    password: [{ validator: validatePass, trigger: 'change' }]
};
const router = useRouter();
const handleFinish = (values: FormState) => {
    console.log(formState);
    console.log("校验成功则进入这里");
    axios({
        method: 'post',
        url: 'http://localhost:18081/login/login',
        data: formState,
        headers: {
            token: "111"
        }
    }).then(res => {
        if (res.data.code === "200") {
            const token = res.data.data.token;
            router.push({
                path: '/homePage',
                query: {
                    token: token
                }
            })
        }
    })
};
const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
    console.log(errors);
    console.log("校验失败则进入这里");
};
</script>

<style scoped>
.fromLeft {
    width: 20%;
    height: 20%;
    position: absolute;
    right: 20%;
    bottom: 30%;
}

.form-parent {
    width: 100%;
    height: 100%;
    background-color: bisque;
}
</style>
